<template>
	<view class="skill">

		<view class="content">
			<view class="form">
				<uv-text text="基础信息" bold color="#333" size="30rpx" />
				<uv-form ref="formRef" :model="model" :rules="rules" labelWidth="180rpx"
					:labelStyle="{fontSize: '28rpx'}">
					<uv-form-item label="简历头像" prop="resume_avatar" borderBottom>
						<view class="avatar-box">
							<uv-avatar :src="model.resume_avatar" size="80rpx"></uv-avatar>
						</view>
					</uv-form-item>

					<uv-form-item label="姓名" prop="real_name" borderBottom>
						<uv-input v-model="model.real_name" border="none" :disabled="true" />
					</uv-form-item>
					<uv-form-item label="手机号" prop="tel" borderBottom>
						<uv-input v-model="model.tel" border="none" placeholder="请输入手机号" />
					</uv-form-item>
					<uv-form-item label="身份证号" prop="id_card_number" borderBottom>
						<uv-input v-model="model.id_card_number" border="none" :disabled="true" />
					</uv-form-item>
					<uv-form-item label="意向行业" prop="skill_category_ids" borderBottom  @click="open('行业')">
						<uv-input v-model="skill_category" border="none" placeholder="请输入意向行业" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>

					<uv-form-item label="工作性质" prop="nature_of_work" borderBottom  @click="open('性质')">
						<uv-input v-model="nature_of_work" border="none" placeholder="请输入工作性质" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>


					<uv-form-item label="工作经验" prop="experience_years" borderBottom>
						<uv-input v-model="model.experience_years" border="none" :disabled="true" />
					</uv-form-item>
					<uv-form-item label="学历" prop="education" borderBottom>
						<uv-input v-model="education" border="none" :disabled="true" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>

					<uv-form-item label="黑名单" prop="education" borderBottom>
						<uv-radio-group v-model="radiovalue">
							<uv-radio :customStyle="{marginLeft: '50rpx'}" v-for="(item, index) in radiolist" :key="index"
								:label="item.label" :name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
                </uv-form>
				
				
			</view>
			<view class="mt-30">
			<tui-button type="danger" shape="rightAngle" @click="submit">保存</tui-button>
			</view>
		</view>
		<uv-gap height="5" bgColor="transparent" />

		<uv-picker ref="xlpicker" :columns="xueli" @confirm="xlpickerVal" confirmColor="#D32D26" />
		<uv-picker ref="xzpicker" :columns="worker" @confirm="xzpickerVal" confirmColor="#D32D26" />

		<uv-popup ref="hangyeRef" mode="bottom" round="10">
			<uv-gap height="10" bgColor="transparent" />
			<uv-text text="意向行业" bold size="30rpx" color="#333" align="center" />
			<view class="popup-content">
				<view class="list">
					<view class="item1" v-for="(e,i) in hangye" :key="i">
						<uv-text :text="e.cate_name" bold size="28rpx" color="#333" />
						<uv-gap height="10" bgColor="transparent" />
						<uv-row gutter="20rpx" customStyle="flex-wrap: wrap">
							<uv-col span="4" v-for="(a,j) in e.child" :key="j">
								<view :class="['tags', isHangye(a.id)]" @click="addHangye(a)">{{ a.cate_name }}</view>
							</uv-col>
						</uv-row>
					</view>
				</view>

				<view class="btn2">
					<uv-button text="确定" color="#D32D26" @click="hyclose" />
				</view>
			</view>
		</uv-popup>

		
		
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		nextTick,
		computed,
		onMounted,
		onUnmounted
	} from 'vue';

	import {
		joinSkill,
		getIntentionList,
		joinSkillDetail
	} from '@/api'
	
	import {
		managerTechnicianDetail,
		editTechnician
	} from '@/api/other.js'

	import {
		navigate,
		checkEmptyProperties,
		isEmpty
	} from '@/util/tools.js';

    const selfId=ref(0)
	const approvedReason = ref('')
	const approvedStatus = ref(null)
	const buttonText = ref('提交资料')

	const radiolist = ref([{
			name: '0',
			label:'否'
		},
		{
			name: '1',
			label:'是'
		}
	])
	const radiovalue = ref(0)

	const checkbox = ref([])
	const hangyeAll = ref([])
	const xzpicker = ref(null)
	const xlpicker = ref(null)

	const formRef = ref(null)
	const hangyeRef = ref(null)
	
	// 表单
	const model = reactive({
		real_name: '', // 真实姓名
		tel: '', // 手机号
		id_card_number: '', // 身份证号
		resume_avatar: '', // 简历头像
		principal_type: 1, // 主体类型：1=个人，2=服务商
		community_province_id: '', // 接单社区-省id
		community_city_id: '', // 接单社区-市id
		community_area_id: '', // 接单社区-区县id
		community_town_id: '', // 接单社区-乡镇id
		community_id: '', // 接单社区-小区id
		skill_category_ids: '', // 意向行业
		nature_of_work: 1, // 工作性质：1=兼职，2=全职
		experience_years: '', // 工作经验（如：10年）
		education: 0, // 学历：0=小学，1=初中，2=中专，3=高中，4=大专，5=本科，6=研究生，7=博士生
		work_experience: '', // 工作经历
		personal_resume: '', // 个人简历
		card_face: '', // 身份证正面
		card_bg: '', // 身份证反面
		certification_info: [], // 专业证书：[{"name": "电工证", "url": "..."}, {"name": "瓦工证", "url": "..."}...]
		is_read_agreement: 1, // 是否阅读协议：0=否，1=是
	})

	// 校验
	const rules = {
		
	}

	// 分类
	const hangye = ref([])
	const worker = reactive([
		["兼职", "全职"]
	])
	const xueli = reactive([
		["小学", "初中", "中专", "高中", "大专", "本科", "研究生", "博士生"]
	])

	// 拼接
	const community = ref('') // 接单社区拼接
	const skill_category = ref('') // 意向行业拼接

	const nature_of_work = computed(() => ['兼职', '全职'][model.nature_of_work - 1]) // 工作性质拼接
	const education = computed(() => ['小学', '初中', '中专', '高中', '大专', '本科', '研究生', '博士生'][model.education]) // 学历拼接

	// 选择
	const open = (e) => {
		if (e == '性质') xzpicker.value.open()
		if (e == '学历') xlpicker.value.open()
		if (e == '社区') {
			let url = '/pages-public/SelectCityArea/SelectCityArea?select_level=5'
			navigate(url)

		}
		if (e == '行业') hangyeRef.value.open()
	}

	

	// 意向行业
	const hyclose = () => {
		hangyeRef.value.close()
		const id = hangyeAll.value.map(e => e.id)
		const name = hangyeAll.value.map(e => e.cate_name)
		skill_category.value = name.join(',')
		model.skill_category_ids = id
	}
	const isHangye = computed((id) => {
		return (id) => {
			const i = hangyeAll.value.findIndex((e) => e.id === id)
			return i > -1 ? 'tags_active' : ''
		}
	})
	const addHangye = (e) => {
		const i = hangyeAll.value.findIndex((a) => a.id === e.id)
		i > -1 ? hangyeAll.value.splice(i, 1) : hangyeAll.value.push(e)
	}
	// 学历
	const xlpickerVal = (e) => model.education = e.indexs[0]
	// 工作性质
	const xzpickerVal = (e) => model.nature_of_work = e.indexs[0] + 1
	// 提交
	const submit = async () => {
		
		let param={}
		param.id = selfId.value*1
		param.tel=model.tel
		param.skill_category_ids = model.skill_category_ids
		param.nature_of_work = model.nature_of_work
		param.is_blacklist = radiovalue.value*1
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		const res = await editTechnician(param)
		uni.hideLoading()
		uni.$uv.toast('保存成功')
	}

	// 获取意向行业
	const getIntention = async () => {
		const {
			result
		} = await getIntentionList()
		hangye.value = result
	}

	const skillDetail = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		let param={id:selfId.value}
		const {
			result
		} = await managerTechnicianDetail(param)
		console.log('----remanagerTechnicianDetailsult----',result)
		model.id = result.id
		model.real_name = result.real_name
		model.tel = result.tel
		model.id_card_number = result.id_card_number
		model.resume_avatar = result.resume_avatar
		model.skill_category_ids = result.skill_category_ids
		model.nature_of_work = result.nature_of_work
		model.experience_years = result.experience_years
		model.education = result.education
		skill_category.value = result.skill_category_name.map(item => item).join(',');
	    uni.hideLoading()
	}
	
	
	onLoad((options) => {
	  if (options.id){
		  selfId.value = options.id
		  skillDetail()
	  } 
	  
	})
	
	

	const init = async () => {
		getIntention()
		
	}

	init()
</script>

<style>

</style>

<style lang="scss" scoped>
	
	
	.approved-reason {
		padding: 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: #666;
	}

	.skill {
		position: relative;

		.bg {
			top: 0;
			z-index: 1;
			width: 100%;
			position: absolute;
		}

		.content {
			z-index: 2;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;
		}

		
		
	}

	.form {
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.form1 {
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.form2 {
		padding: 0 30rpx 80rpx 30rpx;
		box-sizing: border-box;
	}

	.item {
		width: 100%;
		display: flex;
		overflow: hidden;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		background-color: #F7F5F8;

		image {
			width: 100%;
			display: block;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}

		:deep(.uv-upload__wrap) {
			justify-content: space-between !important;
		}
	}

	.btn {
		z-index: 10;
		color: #fff;
		width: 100%;
		height: 100rpx;
		z-index: 110;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		box-sizing: border-box;
		background-color: #D32D26;
	}

	.btn1 {
		z-index: 10;
		color: #fff;
		width: 100%;
		height: 80rpx;
		z-index: 110;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		box-sizing: border-box;
		background-color: #D32D26;
	}

	.checkbox {
		z-index: 10;
		position: relative;

		::v-deep .uv-checkbox {
			margin: 0 auto;
			margin-bottom: 16rpx;
		}
	}

	.popup-content {
		display: flex;
		padding: 30rpx;
		overflow: hidden;
		max-height: 70vh;
		flex-direction: column;
		box-sizing: border-box;

		.list {
			flex: 1;
			overflow: auto;

			.item1 {
				.tags {
					width: 100%;
					color: #333;
					border-radius: 6rpx;
					padding: 10rpx 0;
					font-size: 26rpx;
					text-align: center;
					margin-bottom: 20rpx;
					background-color: #F7F5F8;
				}

				.tags_active {
					color: #fff !important;
					background-color: #D32D26 !important;
				}
			}
		}

		.btn2 {}
	}
</style>